<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import searchLine from "@iconify-icons/ri/search-line";
import View from "@iconify-icons/ep/view";
import ReCol from "@/components/ReCol";
import { useIntervalFn } from "@vueuse/core";
import {
  ref,
  type Ref,
  h,
  reactive,
  watch,
  computed,
  onMounted,
  toRaw,
  nextTick
} from "vue";
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
/** 数字翻拍组件 */
import { ReNormalCountTo } from "@/components/ReCountTo";
/** 分段器组件 */
import Segmented, { type OptionsType } from "@/components/ReSegmented";
/** 折线图组件 */
import ChartLine from "./components/chartLine.vue";
/** 表格组件 */
import { PureTableBar } from "@/components/RePureTableBar";

import { ElMessage } from "element-plus";
import { getSummary } from "@/api/dashboard";

/** 弹窗依赖 */
import { addDialog } from "@/components/ReDialog";
import { deviceDetection } from "@pureadmin/utils";
import editForm from "./form/index.vue";

import { useChart, useTable, useDetail } from "./utils/hook";
const { isDark } = useDark();

defineOptions({
  name: "Dashboard"
});

/** 表格DOM */
// const tableRef = ref();
let timePeriod = ref();
/** echarts主题 */
let theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "default";
});

/** 表格部分 */
const {
  formRef,
  loading,
  dataList,
  pagination,
  columns,
  activeCardIndex,
  onSearch,
  onCardClick,
  handleSizeChange,
  handleCurrentChange
} = useTable();

/** 概览部分 */
const {
  chartLineData,
  pickerMode,
  today,
  pickDataList,
  chooseTime,
  date_shortcuts,
  optionsBasis,
  getChartData,
  changeCustom,
  disabledDate,
  changePickerMode
} = useChart();

/** 页面跳转 */
const { toDetail, router } = useDetail();

/** 新增用户方法 */
function openDialog() {
  addDialog({
    title: "查询订单详情",
    props: {
      formInline: {
        orderno: ""
      }
    },
    width: "46%",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(editForm, { ref: formRef }),
    beforeSure: (done, { options }) => {
      const FormRef = formRef.value.getRef();
      const curData = options.props.formInline;
      FormRef.validate(valid => {
        if (valid) {
          done(); // 关闭弹框
          toDetail({ id: curData.orderno }, "params"); //跳转订单详情
        }
      });
    }
  });
}
/** 监听选择时间 */
watch(chooseTime, (newValue, oldValue) => {
  if (newValue) {
    getChartData(newValue);
    onSearch(newValue);
  }
});

/** 首次数据渲染 */
nextTick(() => {
  getChartData(chooseTime.value);
  onSearch(chooseTime.value);
});
</script>

<template>
  <div>
    <!-- 数据概览 -->
    <el-row :gutter="24" justify="space-around">
      <!-- 统计日期 -->
      <re-col class="pb-4">
        <el-card class="bar-card" shadow="never">
          <div class="pb-2">统计日期</div>
          <div>
            <Segmented
              v-model="pickerMode"
              class="pt-[2px]"
              :options="optionsBasis"
              @change="changePickerMode"
            />
            <el-date-picker
              v-model:number="chooseTime"
              type="daterange"
              range-separator="To"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="default"
              format="YYYY/MM/DD"
              value-format="x"
              :shortcuts="date_shortcuts"
              :disabled-date="disabledDate"
              @calendar-change="changeCustom"
            />
          </div>
        </el-card>
      </re-col>

      <!-- 首行 4个数据 -->
      <re-col
        v-for="(item, index) in chartLineData"
        :key="index"
        v-motion
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * (index + 1)
          }
        }"
      >
        <el-card
          class="normal-card"
          shadow="never"
          :class="{ 'active-card': activeCardIndex === index }"
          style="cursor: pointer"
          @click="onCardClick(index, chooseTime, item.type)"
        >
          <div class="flex justify-between">
            <!-- 模块标题 -->
            <span class="text-md font-medium">
              {{ item.name }}
            </span>
            <!-- 模块图标 -->
            <div
              class="w-8 h-8 flex justify-center items-center rounded-md"
              :style="{
                backgroundColor: isDark ? 'transparent' : item.bgColor
              }"
            >
              <IconifyIconOffline
                :icon="item.icon"
                :color="item.color"
                width="18"
              />
            </div>
          </div>
          <!-- 折线图图表区域 -->
          <div class="flex justify-between items-start mt-3">
            <!-- 左侧数据区域 -->
            <div class="w-1/2">
              <ReNormalCountTo
                :duration="item.duration"
                :fontSize="'1.6em'"
                :startVal="100"
                :endVal="item.value"
              />
              <p class="font-medium text-green-500">{{ item.price }} 元</p>
            </div>
            <!-- 右侧图表区域 -->
            <ChartLine class="!w-1/2" :color="item.color" :data="item.data" />
          </div>
        </el-card>
      </re-col>
    </el-row>

    <!-- 数据表格 -->
    <PureTableBar title="订单列表" :columns="columns" class="mt-0">
      <!-- 表头右侧按钮 -->
      <template #buttons>
        <!--           @click="openDialog" -->
        <el-button
          type="primary"
          :icon="useRenderIcon(searchLine)"
          @click="openDialog"
        >
          订单号查询
        </el-button>
      </template>

      <template v-slot="{ size, dynamicColumns }">
        <!-- 表格区域 -->
        <pure-table
          ref="tableRef"
          adaptive
          row-key="id"
          align-whole="center"
          table-layout="auto"
          :paginationSmall="size === 'small' ? true : false"
          :pagination="pagination"
          :loading="loading"
          :size="size"
          :adaptiveConfig="{ offsetBottom: 108 }"
          :columns="dynamicColumns"
          :data="dataList"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <!-- 操作按钮 -->
          <template #operation="{ row }">
            <!-- 【操作】 查看按钮 -->
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(View)"
              @click="toDetail({ id: row.orderno }, 'params')"
            >
              查看
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;
  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}
.normal-card {
  border: 2px solid #ebeef5;
  transition: 0.1s;
  border-radius: 10px;
}

.active-card:deep(.el-card__body) {
  position: relative;
  transition: all 0.5s;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    border: 2px solid #647bd0;
    animation: clippath 20s infinite linear;
  }
  &::after {
    animation: clippath 20s infinite -10s linear;
  }
}

@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 95% 0);
  }
  25% {
    clip-path: inset(0 95% 0 0);
  }
  50% {
    clip-path: inset(95% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 95%);
  }
}
</style>
